<template>
    <div class="container">
      <div class="header" style="padding: 5px 10px; height: 7%">
        <strong>标题：</strong>
        <el-input v-model="params.keyWord" placeholder="请输入内容" style="width: 500px"></el-input>
        <el-button type="primary" @click="writeBlog" icon="el-icon-edit" style="float: right;margin: 0 100px">写博客</el-button>
      </div>
      <el-table
        v-loading="loading"
        stripe
        :data="tableData"
        text-align="center"
        :default-sort = "{prop: 'created', order: 'descending'}"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="created"
          :formatter="dateFormat"
          label="日期"
          sortable>
        </el-table-column>
        
        <el-table-column
          prop="name"
          label="类别">
        </el-table-column>

        <el-table-column
          prop="sum"
          label="评论数">
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.status === 1"
                size="small"
                type="success"
                >启用</el-tag
              >
              <el-tag
                v-else-if="scope.row.status === 0"
                size="small"
                type="warning"
                >禁用</el-tag
              >
            </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteBlog(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button @click="updateBlog(scope.row.id)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col class="pagination-container">
            <el-pagination
                style="float: right;margin-top:20px"
                background
                layout="total, prev, pager, next"
                :total="params.total"
                :current-page.sync="params.currentPage"
                :page-size.sync="params.pageSize"
                @current-change="loadTableData"
            />
        </el-col>
    </el-row>
    </div>
</template>

<script>
  import moment from 'moment'
  import {getBlogList, deleteBlogById} from 'network/app'
  export default {
    data() {
      return {
        tableData: [],
        params:{
            pageSize: 10,
            currentPage: 1,
            total: 0,
            keyWord: '',
            sortWord: ''
        },
        loading: false
      }
    },
    methods: {
      dateFormat(row,column){

        var date = row[column.property];

        if(date == undefined){return ''};

        return moment(date).format("YYYY-MM-DD")

      },
      
      deleteBlog(id){
        this.loading = true
        deleteBlogById(id)
            .then(res=>{
                this.loadTableData()
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
            })
            .finally(()=>{
                this.loading = false
            })
      },
      updateBlog(id){
        this.$router.push({
          path: '/console/blog/edit/'+id,
        })
      },
      loadTableData(){
        this.loading = true
        getBlogList(this.params)
            .then(res=>{
                console.log(res)
                this.tableData = res.data.data.records
                this.params.total = res.data.data.total
            })
            .finally(()=>{
                this.loading = false
            })

      },
      writeBlog(){
        this.$router.push({path: '/console/blog/add'})
      }
    },
    created(){
      this.loadTableData()
    },
  }
</script>

<style scoped>
  .container{
    height: 100%;
  }
</style>
